@import 'element-plus/theme-chalk/el-loading.css';
@import 'element-plus/theme-chalk/el-message.css';
@import 'element-plus/theme-chalk/el-message-box.css';
@import 'element-plus/theme-chalk/el-notification.css';
@import 'element-plus/theme-chalk/el-date-picker.css';
@import 'element-plus/theme-chalk/el-time-picker.css';
@import 'element-plus/theme-chalk/el-radio.css';
@import 'element-plus/theme-chalk/el-radio-group.css';
@import 'element-plus/theme-chalk/el-checkbox-button.css';

html.dark-aside {
  --bg-color: #141414;
  --text-color: #d0d0d0;
  --text-color-white: #fff;

  .el-aside,
  .el-menu,
  .layout-columns-aside,
  .layout-columns-children-aside,
  .layout-columns-aside,
  .layout-horizontal-header {
    background-color: var(--bg-color) !important;
  }
  .el-menu-item, .el-sub-menu__title {
    .el-text, .el-icon {
      color: var(--text-color) !important;
    }
    &:hover {
      background-color: var(--el-color-primary-darken-7) !important;
      .el-text, .el-icon {
        color: var(--text-color-white) !important;
      }
    }
  }
  .el-menu-item {
    &.is-active {
      color: var(--text-color-white) !important;
      background-color: var(--el-color-primary) !important;
      .el-text, .el-icon {
        color: var(--text-color-white) !important;
      }
      &:hover {
        background-color: var(--el-color-primary) !important;
      }
    }
  }
  // layout-columns
  .layout-columns-children-aside-title {
    color: var(--text-color);
  }
  .layout-columns-li {
    .el-text, .el-icon {
      color: var(--text-color) !important;
    }
    &:hover {
      background-color: var(--el-color-primary-darken-7) !important;
      .el-text, .el-icon {
        color: var(--text-color-white) !important;
      }
    }
    &.is-active:hover {
      background-color: var(--el-color-primary) !important;
    }
  }
  // layout-horizontal
  .el-menu--horizontal>.el-menu-item {
    color: var(--text-color) !important;
    .el-text, .el-icon {
      color: var(--text-color) !important;
    }
  }
  .el-menu--horizontal .el-menu .el-menu-item {
    background-color: transparent !important;
    color: var(--text-color) !important;
  }
  .el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
    color: var(--text-color) !important;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: var(--text-color) !important;
    span {
      color: var(--text-color) !important;
    }
  }
  .el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
    background-color: var(--el-color-primary-darken-7) !important;
  }
  .el-menu--horizontal .el-menu .el-sub-menu__title {
    background-color: var(--bg-color) !important;
    span, .el-icon {
      color: var(--text-color) !important;
    }
  }
  .layout-horizontal-header {
    .toolbar-user, .toolbar-setting-icon {
      color: var(--text-color) !important;
    }
    .toolbar-setting-icon:hover, .toolbar-user:hover {
      background-color: var(--el-color-primary-darken-7) !important;
    }
  }
  
}

.el-container {
  height: 100%;
  transition: all 0.5s;
}

.el-main {
  &::-webkit-scrollbar {
    width: 8px;
    height: 1px;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    width: 9px;
    height: 3px;
    border-radius: 10px;
    background-color: #ccc;
  }
}

.el-header {
  height: auto !important;
}

.el-input {
  width: 100% !important;
}

.el-pagination .el-select {
  width: 128px !important;
}

.el-table .el-table__header th {
  font-size: 15px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  padding: $space-small-s 0;
  background-color: var(--el-fill-color-light) !important;
}

.el-table {
  --el-table-row-hover-bg-color: var(--el-fill-color-light) !important;
}

.el-overlay {
  transition:
    background-color 0.3s,
    backdrop-filter 0.3s;
}

.el-overlay-dialog {
  overflow-x: hidden;
}

.el-popper.is-dark .el-text {
  color: var(--el-color-white) !important;
}

.el-col .el-card {
  margin-bottom: $space-small;
}

.el-drawer {
  .el-drawer__header {
    padding: 16px $space-medium-s;
    margin-bottom: 0;
    border-bottom: 1px solid var(--el-border-color);
  }
}